import {Component, EventEmitter, Input, OnDestroy, OnInit, Output} from "@angular/core";
import {CommService} from "../comm-service";
import {SharedService} from "../shared-service";
import * as e from "echarts";
import {MyhttpService} from "../myhttp.service";

@Component({
  template: `
    <div class="bqsjbxx comp" [style.width]="compw" [style.height]="comph" [style.top]="topv"
         [style.left]="leftv">
      <div class="content">
        <div class="title">
          <div class="title_text">试卷包实时情况 {{comptitle}}</div>
        </div>
        <div class="body">
          <div class="bqxx">
            <span class="mc">{{sjbxx.mc}}</span>
            <span class="sbid">设备id:{{sjbxx.bqid}}</span>
            <span class="sswz">当前位置：{{sjbxx.sswz}}</span>
          </div>
          <div class="sjbssqkRoom iecrollkf chromescrollkf">
            <ul class="list-group" *ngIf="tlineDatas.length">
              <li class="list-group-item tlineitem" *ngFor="let item of tlineDatas;index as index">
                <div class="pull-left circleroom">
                 <span [ngClass]="{'endcircle':item.status<0,'ingcircle':item.status==0,'circle':item.status>0}">
                   <i class="fa fa-circle"></i>
                 </span>
                  <div class="vertical_line"
                       [ngClass]="{'endvline':item.status<0,'ingvline':item.status==0,'vline':item.status>0}"></div>
                </div>
                <div class="pull-left tsitem">
                  <span *ngIf="item.zt==0"
                        style="display: inline-block;width: 100%;height: 100%;line-height: 30px; text-align: center; background-color: #2094F2;color: #ffffff">运送开始</span>
                  <span *ngIf="item.zt==-1"
                        style="display: inline-block;width: 100%;height: 100%;line-height: 30px; text-align:center; background-color: #FD5354;color: #ffffff">运送结束</span>
                </div>
                <div class="pull-left xxitem">
                  <span class="time">{{item.tline}}</span>
                  <span class="marker" *ngIf="item.marker_e">{{item.marker_b}}<span
                    style="color: #FE8564">出库</span>{{item.marker_e}}</span>
                  <span class="marker" *ngIf="!item.marker_e">{{item.marker_b}}<span
                    style="color: #6CBB70">入库</span></span>
                </div>
                <div class="clearfix"></div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  `,
  styles: [
    ".bqsjbxx{position:absolute;background-color:#fff;border:5px solid #ccc;}",
    ".content{width: calc(100%);height: calc(100%);}",
    ".content>.title{position: relative;width: 100%;height: auto;padding: 10px; border-bottom: 1px solid #ccc; color: rgb(138 143 151);}",
    ".title>.title_text{height: 15px;line-height: 15px;font-size: 15px;  width: auto;border-left: 5px solid #1477F3;padding-left: 10px}",
    ".content>.body{position: relative;width: 100%;height: calc(100% - 24px);padding: 10px 10px}",
    ".body>.bqxx{height: 38px;width: auto;text-align: right}",
    ".body>.sjbssqkRoom{width: calc(100% - 17px);margin-top: 10px;height:205px;overflow-y: auto}",

    ".tlineitem{border: none;padding: 0px;margin: 0px}",
    ".tlineitem>.circleroom{width:40px; height: 30px;text-align: center;position: relative;padding-top: 5.5px}",
    ".circleroom>.vertical_line{position: absolute;left: 19.5px;top: 0px;width: 1px;height: 30px;}",
    ".tlineitem>.tsitem{width: 80px;height: 30px;}",
    ".tlineitem>.xxitem{width: calc(100% - 120px);height: 30px;line-height: 30px}",
    ".xxitem>.time{display: inline-block;width: 150px;text-align: center}",
    ".xxitem>.marker{display: inline-block;width: auto;padding-left: 10px}",


    ".endcircle{color: #ADDFE6}",
    ".ingcircle{color:#F9332A }",
    ".circle{color: #39A1F4;}",
    ".endvline{background-color: #ADDFE6}",
    ".ingvline{background-color: #F9332A}",
    ".vline{background-color: #39A1F4}",

    ".bqxx>.mc{display: inline-block;padding: 0px 10px;color: #70B8F7}",
    ".bqxx>.sbid{display: inline-block;padding: 0px 10px;width: 200px;color: #70B8F7;text-align: left}",
    ".bqxx>.sswz{display: inline-block;padding: 0px 10px;color: #70B8F7}",
  ]
})
export class BmskdBqsjbxxComponent implements OnInit, OnDestroy {
  compw: string = "0px";
  comph: string = "0px";
  topv: string = "0px";
  leftv: string = "0px";
  comptitle: string = "";
  frompage: string;

  sjbxx: any = {
    mc: "",
    bqid: "",
    sswz: ""
  }
  s_obj: any = {
    sjbbh: ""
  }
  tlineDatas: any[] = [];
  timelockid: any;

  getData(): void {
    if (!this.s_obj.sjbbh) {
      this.tlineDatas.length = 0;
      return
    }
    const url = "sjgz/zsymbmsjkd/sjblzrz";
    this.itservice.kwPtPost(url, this.s_obj).subscribe(resp => {
      this.commservice.handResponse("get", url, resp, (arg1, resp, arg2) => {
        if (arg1) {
          if (arg2) {
            const sjblzrzListv = resp.sjblzrzList ? resp.sjblzrzList : [];
            if (!sjblzrzListv.length) {
              this.tlineDatas.length = 0;
              return
            }
            this.tlineDatas = sjblzrzListv.map((item) => {
              const jlsjv = item.jlsj; // 记录时间
              const crklxv = item.crklx; // 出入库类型：1 出库；2入库
              const cfdlxv = item.cfdlx; // 发地类型：ysc/bms/bzhkd
              const cfdmcv = item.cfdmc; // 出发地名称
              const mddlxv = item.mddlx; // 目的地类型：bms/bzhkd/smd
              const mddmcv = item.mddmc;  // 目的地名称
              const newobj = {
                tline: jlsjv,
                marker_b: "",
                marker_e: "",
                status: 1, // 初始化都是将来时 , 圈的颜色
                zt: 1  //1  不显示   0 --开始  -1 结束
              };
              if (crklxv == "1") {
                //出库
                newobj.marker_b = `试卷包从【${cfdmcv}】`;
                newobj.marker_e = `，送往【${mddmcv}】`;
                if (cfdlxv == "ysc") {
                  newobj.zt = 0;
                }


              } else {
                // 入库
                newobj.marker_b = `试卷包在【${mddmcv}】`;
                if (mddlxv == "smd") {
                  newobj.zt = -1;
                }
              }
              return newobj;
            });
            this.tlineDatas = this.tlineDatas;
            this.handerLine();
          }
        }
      });
    });

    //
    // const hqkcgzjcxxList = [{
    //   kssj: "2020-12-24 13:20",
    //   action: "ck",
    //   cfd: "湖北省教育考试印务中心",
    //   mdd: "武汉市洪山区保密室",
    //   zt: 0,
    //   //jcxq: "试卷包从【湖北省教育考试印务中心】出库，送往【武汉市洪山区保密室】"
    // }, {
    //   kssj: "2020-12-26 06:20",
    //   action: "ck",
    //   cfd: "武汉市洪山区保密室",
    //   mdd: "武汉市长虹中学",
    //   zt: 1
    //   //jcxq: "试卷包从【武汉市洪山区保密室】出库，送往【武汉市长虹中学】"
    // }, {
    //   kssj: "2020-12-26 06:43",
    //   action: "rk",
    //   cfd: "",
    //   mdd: "武汉市长虹中学",
    //   zt: 1
    //   //jcxq: "试卷包在【武汉市长虹中学】入库"
    // }, {
    //   kssj: "2020-12-26 18:00",
    //   action: "ck",
    //   cfd: "武汉市长虹中学",
    //   mdd: "洪山区保密室",
    //   zt: 1
    //   //jcxq: "试卷包从【武汉市长虹中学】出库，送往【洪山区保密室】"
    // }, {
    //   kssj: "2020-12-26 18:23",
    //   action: "rk",
    //   cfd: "",
    //   mdd: "洪山区保密室",
    //   zt: 1
    //   //jcxq: "试卷包在【洪山区保密室】入库"
    // }, {
    //   kssj: "2020-12-28 08:40",
    //   action: "ck",
    //   cfd: "武汉市洪山区保密室",
    //   mdd: "湖北省沙湖教育考试极低评卷中心",
    //   zt: 1
    //   //jcxq: "试卷包从【武汉市洪山区保密室】出库，送往【湖北省沙湖教育考试极低评卷中心】"
    // }, {
    //   kssj: "2020-12-28 09:43",
    //   action: "rk",
    //   cfd: "",
    //   mdd: "湖北省沙湖教育考试基地评卷中心",
    //   zt: -1
    //   // jcxq: "试卷包在【湖北省沙湖教育考试基地评卷中心】入库"
    // }];
    // this.tlineDatas = hqkcgzjcxxList.map((item) => {
    //   const actionv = item.action; // ck  rk
    //   const cfdv = item.cfd;
    //   const mddv = item.mdd;
    //   let markerbv: string = "";
    //   let markerev: string = "";
    //   if (actionv == "ck") {
    //     markerbv = `试卷包从【${cfdv}】`;
    //     markerev = `，送往【${mddv}】`;
    //   } else if (actionv == "rk") {
    //     markerbv = `试卷包在【${mddv}】`;
    //   }
    //   return {
    //     tline: item.kssj,
    //     marker_b: markerbv,
    //     marker_e: markerev,
    //     status: 1, // 初始化都是将来时
    //     zt: item.zt
    //   }
    // });
    // this.tlineDatas = this.tlineDatas.reverse();
    // this.handerLine();
  }

  /**
   * status
   * -1  ---过去时 --灰
   * 0  --进行时 ---红
   * 1----将来时 ---蓝
   */
  handerLine(): void {
    if (!this.tlineDatas.length) {
      return
    }
    const nowms = Date.now(); //ms
    const data_mintime = this.tlineDatas[this.tlineDatas.length - 1]["tline"]; // 倒序
    const data_maxtime = this.tlineDatas[0]["tline"];
    const data_minms = this.commservice.convertTimeToInt(data_mintime);  // ms
    const data_maxms = this.commservice.convertTimeToInt(data_maxtime); // ms
    if (nowms < data_minms) {
      // -无穷  data_minms）
      this.tlineDatas.forEach((item) => {
        item.status = 1; // 都在将来时
      });
      this.tlineDatas[this.tlineDatas.length - 1]["status"] = 0;
    } else if (nowms < data_maxms) {
      // 【data_minms  data_maxms)
      let nowindex: number;
      this.tlineDatas.forEach((item, index) => {
        const ittlinev = item.tline;
        const itlinems = this.commservice.convertTimeToInt(ittlinev); // ms
        const itprelienms = this.tlineDatas[index - 1] ? this.commservice.convertTimeToInt(this.tlineDatas[index - 1]["tline"]) : 0;
        if (nowms == itlinems) {
          nowindex = index;
          item["tline"] = 0;
          for (let i = 0; i < nowindex; i++) {
            this.tlineDatas[i]["tline"] = 1;
          }
          for (let j = (nowindex + 1); j < this.tlineDatas.length; j++) {
            this.tlineDatas[j]["tline"] = -1;
          }
        }
        if (nowms > itlinems && nowms < itprelienms) {
          for (let i = 0; i < nowindex; i++) {
            this.tlineDatas[i]["tline"] = 1;
          }
          for (let j = nowindex; j < this.tlineDatas.length; j++) {
            this.tlineDatas[j]["tline"] = -1;
          }
        }
      });
    } else {
      //【data_maxms +无穷
      this.tlineDatas.forEach((item) => {
        item.status = -1;
      });
      this.tlineDatas[0]["status"] = 0;
    }
  }

  /**
   * 组件在 显示面板中的位置+ 大小
   */
  initcompPositionSize_ctrshow(): void {
    // 位置 大小
    this.compw = this.o.compw + "px";
    this.comph = this.o.comph + "px";
    this.topv = this.o.topv + "px";
    this.leftv = this.o.leftv + "px";
    // 显示
    this.frompage = this.o.frompage;
    if (this.frompage === "bmskd") {
      this.handerLine();
      this.timelockid = setInterval(() => {
        this.handerLine();
      }, 30000);
    }
  }


  @Input() o: any;
  @Output() outhander: EventEmitter<any> = new EventEmitter();

  constructor(private commservice: CommService,
              private itservice: MyhttpService,
              private sharedService: SharedService) {
    this.sharedService.changeEmitted$.subscribe(resp => {
      const actiontype = resp.actiontype;
      const datav = resp.data;
      switch (actiontype) {
        case "toggleActiveBq": {
          const activebqobj = datav.activebqobj;
          console.log("试卷包流转日志", activebqobj);
          this.comptitle = `(${activebqobj.text})`;
          this.sjbxx.mc = activebqobj.text;
          this.sjbxx.bqid = activebqobj.id;
          this.sjbxx.sswz = activebqobj.sswz;
          this.s_obj.sjbbh = activebqobj.data.sjbbh;
          this.getData();
        }
          break;
      }
    });
  }

  ngOnInit() {
    this.commservice.log("-- 【 compkey=bqsjbxx】--被父组件动态加载init....", this.o);
    this.initcompPositionSize_ctrshow();

  }

  ngOnDestroy() {
    if (this.timelockid) {
      clearInterval(this.timelockid);
    }
  }

}
